<template>
  <div>
    <el-card class="box-card"
      style="margin-top: 26px; margin-left: 14px;width: 98% ;vertical-align: middle;height:600px;">
      <div style="margin-left:14px;width: 98%;margin-bottom: 20px;margin-top:20px;">
        <el-row>
          <el-button @click="add()" style="margin-left: 16px;" type="success">新增</el-button>
          <el-button @click="edit()" style="margin-left: 16px;">编辑</el-button>
          <el-button>删除</el-button>
          <el-button>启动</el-button>
          <el-button>停用</el-button>
          <el-button style="float: right;margin-right:14px;" type="primary" icon="el-icon-search">搜索</el-button>
          <el-input style="float: right; width: 200px;margin-right:20px;" v-model="input"
            placeholder="请输入部门编码或名称"></el-input>
        </el-row>
        <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">
          <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
            <el-form-item label="岗位名称">
              <el-input v-model="formLabelAlign[0].name"></el-input>
            </el-form-item>
            <el-form-item label="岗位编号">
              <el-input v-model="formLabelAlign[0].date"></el-input>
            </el-form-item>
            <el-form-item label="排序">
              <el-input v-model="formLabelAlign.address"></el-input>
            </el-form-item>
            
            <el-form-item label="状态" prop="resource">
              <el-radio-group v-model="formLabelAlign.resource">
                <el-radio label="启用" value="0"></el-radio>
                <el-radio label="停用" value="1"></el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="备注" prop="desc">
              <el-input type="textarea" v-model="formLabelAlign.desc"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">立即创建</el-button>
            </el-form-item>
          </el-form>
        </el-drawer>
      </div>
      <div style=" margin-left:14px;width: 98%;">
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55">
          </el-table-column>
          <el-table-column label="日期" width="120">
            <template slot-scope="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址" show-overflow-tooltip>
          </el-table-column>
        </el-table>
      </div>

      <div class="block">

        <el-pagination style="margin-left: 14px;margin-top:20px;" :total="400" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]"
          :page-size="100" layout="total, sizes, prev, pager, next, jumper">
        </el-pagination>
      </div>
    </el-card>

  </div>

</template>

<script>
export default {
  methods: {
    //页数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    //当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    //切换页面
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    //一件选取
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //编辑
    edit(){
      this.drawer=true
      if(this.multipleSelection.length==1){
        this.formLabelAlign=this.multipleSelection;
        console.log(this.formLabelAlign);
      }else{
        console.log("不是");
      }
    },
    //新增
    add(){
      this.drawer=true
      this.formLabelAlign=[{
        date: '',
        name: '',
        address: ''
      }]
    },
    //抽屉按钮
    onSubmit() {
        console.log('submit!');
      }
  },
  data() {
    return {
      
      formLabelAlign:[{
        date: '',
        name: '',
        address: ''
      }]
      ,
      drawer: false,
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        name: 's',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: 'a',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: 'f',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      multipleSelection: [],
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4
    }
  }
}
</script>